<template>
   <div class="promote">
    <!-- 导航 -->
    <top-bar :navList="navList" @post = 'getSelected'></top-bar>
    <!-- code -->
    <div class="code" v-if="selected==0">
        <img class="bg" src="../../assets/admin_bg1.jpg">
        <div class="wx">
            <img src="../../assets/admin_code.jpg" >
            <p>邀请码：T131</p>
        </div>
        <p class="tip">看片前请保存官网，被封后可在官网下载新的APP 官网：smyun.tv</p>
        <div class="btn">
          <p>注：请用手机截图保存二维码</p>
          <p>复制链接</p>
        </div>
    </div>
    <!-- note -->
    <div class="note" v-else>
      <ul class="info">
        <li><p>推广人数：<i>17人</i></p><p>推广赚取：<i>2观影币</i></p></li>
        <li><p>开通次数：<i>2次  </i></p><p>消费金额：<i>530观影币</i></p></li>
        <li><p>累计天数：<i>60天</i></p><p>今日赚取：<i>10观影币</i></p></li>
      </ul>
      <ul class="list">
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>2019/1/25 21:54</i></p></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>2019/1/25 21:54</i></p></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>2019/1/25 21:54</i></p></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>2019/1/25 21:54</i></p></li>
        <li><img src="../../assets/tx.png"><p>用户186****3570<i>2019/1/25 21:54</i></p></li>
      </ul>
    </div>
   </div>
</template>

<script>
import { TabContainer, TabContainerItem } from 'mint-ui'
import TopBar from '@/components/TopBar'
export default {
  data () {
    return {
      navList: ['宣传推广', '推广记录'],
      selected: 0
    }
  },
  methods: {
    getSelected (e) {
      this.selected = e
    }
  },
  components: {
    TopBar,
    mtTabContainer: TabContainer,
    mtTabContainerItem: TabContainerItem
  }
}
</script>
<style lang="less">
  .promote { padding-top:56px;}
  .promote .code {
     overflow: hidden;
    .bg { position: fixed; z-index: -1;}
    .wx {
      width: 164px; height: 185px;  margin:126px auto 0; background: #fff; border-radius: 10px; text-align: center; overflow: hidden;
      img { width: 130px; height: 130px; padding-top:20px;}
      p { font-weight: bold; color: #FF9405; font-size: 18px;}
    }
    .tip { padding: 20px 50px; text-align: center; color: #fff; font-size: 15px; }
    .btn {
      display: flex; justify-content:space-between; padding: 0 20px;
      p { color: #fff; font-size: 16px; line-height: 38px; text-align: center; border-radius: 10px;}
      p:nth-child(1) { background: #FF9405; width: 70%;}
      p:nth-child(2) { background: #B28E5F; width: 27%;}
    }
  }

  .promote .note {
     .info {
       padding:40px 10px 20px 30px;
       li {
         display: flex; line-height: 2em;
         p {
           width: 50%; font-size:15px; color: #969696;
           i { color: #39314A; display: inline-block;}
         }
       }
     }
     .list {
       padding: 0 20px;
       li {
         display: flex;  height:60px; align-items: center;
         img { width: 44px; height: 44px; margin-right: 20px;}
         p {
           color: #39314A; font-size: 16px;
           i { font-size: 12px; color: #969696;line-height: 2em;}
         }
       }
     }
  }
</style>
